<template>
  <q-drawer
    v-model="docStore.state.value.menuDrawer"
    class="doc-left-drawer"
    side="left"
    bordered
    :width="asideWidth"
  >
    <q-scroll-area style="height: calc(100% - 10px); margin-top: 10px">
      <doc-page-menu class="q-mx-xs q-mb-lg" />
    </q-scroll-area>
    <!-- <div class="absolute-top header">
      <NavBarSearch />
    </div> -->
    <div class="absolute-right header">
      <div class="分割线" :style="{ cursor: 'col-resize' }" ref="drag">
        <q-btn
          class="分割线-button"
          padding="none"
          icon="code"
          flat
          color="紫磨真金"
          round
          @click="折叠展开左侧()"
          size="1em"
        ></q-btn>
      </div>
    </div>
  </q-drawer>
</template>

<script setup>
import { useDocStore } from "../store/index.js";
import DocPageMenu from "./DocPageMenu.js";
const docStore = useDocStore();

import { ref, onMounted } from "vue";
onMounted(() => {
  绑定拖动();
});
function 折叠展开左侧() {
  asideWidth.value = asideWidth.value === 0 ? 250 : 0;
}
const drag = ref(null);
const asideWidth = ref(250);
function 绑定拖动() {
  drag.value.onmousedown = function () {
    document.onmousemove = function (e) {
      // console.log("e.clientX", e.clientX);
      asideWidth.value = e.clientX;
    };
    document.onmouseup = function () {
      document.onmousemove = null;
      document.onmouseup = null;
    };
    return false;
  };
}
</script>
<style lang="sass" scoped>
@import "@the/css/app.sass"

.分割线
  width: 2px
  height: 100%
  position: relative
  background: $紫磨真金
.分割线-button
  position: absolute
  top: 50%
  left: 50%
  transform: translate(-50%, -50%)
</style>
